<template>
    <div class="about" style="background: #fff">
        <a-carousel autoplay>
<!--            <template #prevArrow>-->
<!--                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">-->
<!--                    <left-circle-outlined />-->
<!--                </div>-->
<!--            </template>-->
<!--            <template #nextArrow>-->
<!--                <div class="custom-slick-arrow" style="right: 10px">-->
<!--                    <right-circle-outlined />-->
<!--                </div>-->
<!--            </template>-->
            <div><img src="image/1.jpg"></div>
            <div><img src="image/2.jpg"></div>
            <div><img src="image/3.jpg"></div>
            <div><img src="image/4.jpg"></div>
        </a-carousel>
        <div style="padding-left: 30px; padding-right: 30px; padding-top: 20px">
            <a-divider orientation="left">宣传语</a-divider>
        </div>
        <div style="padding-left: 30px; padding-right: 30px; padding-top: 20px">
            <a-divider orientation="left">使用流程</a-divider>
        </div>
        <div style="padding-left: 30px; padding-right: 30px; padding-top: 20px">
            <a-divider orientation="left">优秀教员</a-divider>
            <router-link to="/about" style="float: right;">more >></router-link>
            <div style="padding-top: 30px; padding-bottom: 20px">
                <a-row>
                    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
                        <a-card hoverable style="width: 300px">
                            <template #cover>
                                <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                            </template>
                            <a-card-meta>
                                <template #title>姓名：大西<span style="float: right">专业：软件工程</span></template>
                                <template #description>自我评价：阿巴阿巴</template>
                            </a-card-meta>
                            <div style="text-align:center; margin-top: 20px">
                                <a-button type="primary">查看简历</a-button>
                            </div>
                        </a-card>
                    </a-col>
                    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
                        <a-card hoverable style="width: 300px">
                            <template #cover>
                                <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                            </template>
                            <a-card-meta>
                                <template #title>姓名：大西<span style="float: right">专业：软件工程</span></template>
                                <template #description>自我评价：阿巴阿巴</template>
                            </a-card-meta>
                            <div style="text-align:center; margin-top: 20px">
                                <a-button type="primary">查看简历</a-button>
                            </div>
                        </a-card>
                    </a-col>
                    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
                        <a-card hoverable style="width: 300px">
                            <template #cover>
                                <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                            </template>
                            <a-card-meta>
                                <template #title>姓名：大西<span style="float: right">专业：软件工程</span></template>
                                <template #description>自我评价：阿巴阿巴</template>
                            </a-card-meta>
                            <div style="text-align:center; margin-top: 20px">
                                <a-button type="primary">查看简历</a-button>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
    import { defineComponent } from 'vue';
    export default defineComponent({
        components: {
            LeftCircleOutlined,
            RightCircleOutlined,
        },
    });
</script>

<style scoped>
    /* For demo */
    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 400px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden;
    }

    .ant-carousel >>> .slick-arrow.custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        background-color: rgba(31, 45, 61, 0.11);
        opacity: 0.3;
    }
    .ant-carousel >>> .custom-slick-arrow:before {
        display: none;
    }
    .ant-carousel >>> .custom-slick-arrow:hover {
        opacity: 0.5;
    }

    .ant-carousel >>> .slick-slide h3 {
        color: #fff;
    }
</style>